<template>
    <div class="organ-page page">
        <div class="content organ-content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
                <span style="margin-left: 10px">编辑机构</span>
            </PlatformCrumb>
            <div style="margin:0 auto;width:1000px;padding-top:100px;background:#fff;padding-right:40px;padding-left:40px">
                <el-form>
                    <el-form-item>
                        <span class="border">LOGO（只支持jpg格式、上传图片大小2M内）</span>
                        <div class="logoImg">
                            <img v-if="dataForm.logoImg" :src="dataForm.logoImg|filtersImg" alt="">
                            <el-upload
                                    list-type="picture-card"
                                    ref='upload'
                                    :action='imgupload'
                                    class="upload-demo"
                                    accept="image/jpeg,image/gif,image/png"
                                    :show-file-list="false"
                                    name="file"
                                    :on-success="uplogoImg"
                                    multiple>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">轮播图（只支持jpg格式、上传图片大小2M内）</span>
                        <div class="logoImg">
                            <upimgmultiple :imgs.sync="dataForm.banner"></upimgmultiple>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">机构修改</span>
                        <p><strong>机构名称</strong></p>
                        <el-input v-model="dataForm.name"></el-input>

                        <p><strong>机构图片</strong></p>
                        <div class="logoImg">
                            <img v-if="dataForm.homeImgs" :src="dataForm.homeImgs|filtersImg" alt="">
                            <el-upload
                                    list-type="picture-card"
                                    ref='upload'
                                    :action='imgupload'
                                    class="upload-demo"
                                    accept="image/jpeg,image/gif,image/png"
                                    :show-file-list="false"
                                    name="file"
                                    :on-success="uphomeImgs"
                                    multiple>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <p><strong>机构简介</strong></p>
                        <div style="position: relative;z-index: 1;">
                            <div id="wang1"></div>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">训练设施</span>
                        <p><strong>上传图片</strong></p>
                        <div class="logoImg">
                            <upimgmultiple :imgs.sync="dataForm.trainingFacilities"></upimgmultiple>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">训练视频</span>
                        <div class="logoImg">
                            <video
                                    v-if="dataForm.trainingVideo"
                                    style="width:500px; margin-right: 20px"
                                    :src="dataForm.trainingVideo|filtersImg"
                                    controls>
                            </video>
                            <el-upload
                                    list-type="picture-card"
                                    class="avatar-uploader mr10"
                                    :action="videoupload"
                                    :show-file-list="false"
                                    :on-success="uptrainingVideoList"
                            >
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">机构信息</span>
                        <div style="position: relative;z-index: 1;">
                            <div id="wang2"></div>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">机构课程</span>
                        <div class="logoImg">
                            <upimgmultiple :imgs.sync="dataForm.courses"></upimgmultiple>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">教练团队</span>
                        <div class="logoImg">
                            <upimgmultiple :imgs.sync="dataForm.teams"></upimgmultiple>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">赛事荣誉</span>
                        <div class="logoImg">
                            <upimgmultiple :imgs.sync="dataForm.matchs"></upimgmultiple>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <span class="border">界面底部栏</span>
                        <p><strong>更换二维码</strong></p>
                        <div class="logoImg">
                            <img v-if="dataForm.publicImg" :src="dataForm.publicImg|filtersImg" alt="">
                            <el-upload
                                    list-type="picture-card"
                                    ref='upload'
                                    :action='imgupload'
                                    class="upload-demo"
                                    accept="image/jpeg,image/gif,image/png"
                                    :show-file-list="false"
                                    name="file"
                                    :on-success="uppublicImg"
                                    multiple>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <span>联系方式</span>
                        <el-input v-model="dataForm.infoPhone"></el-input>
                        <span>地址</span>
                        <el-input v-model="dataForm.infoAddress"></el-input>
                        <span>邮箱</span>
                        <el-input v-model="dataForm.infoMail"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSave">保存</el-button>
                    </el-form-item>
                </el-form>
                <br>
            </div>
        </div>
    </div>
</template>

<script>

    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import upimgmultiple from "@/components/upimgmultiple.vue";
    import Wang from 'wangeditor'
    import {mapActions, mapState} from 'vuex'
    import {setTimeout} from 'timers';
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb,
            upimgmultiple
        },
        data() {
            return {
//  :file-list="publicImg"
//             :on-success="uppublicImg"
//             :on-remove="RemovepublicImg"
//             :limit="1"
                logoList: [],//logo
                bannerList: [],//banner
                homeImgsList: [],
                courses: [],
                teams: [],
                matchs: [],
                id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0,
                publicImg: [],//二维码
                trainingFacilitiesImgsList: [],//训练设施图片
                trainingVideoList: [],//训练视频
                wang1: '',
                wang2: '',
                imgupload: imgupload,
                videoupload: videoupload,
                dataForm: {
                    address: "",
                    addressInfo: "",
                    banner: '',
                    businessLicence: "",
                    courses: '',
                    homeImgs: "",
                    info: "",
                    infoAddress: "",
                    infoMail: "",
                    infoPhone: "",
                    leaderName: "",
                    leaderNo: "",
                    leaderPhone: "",
                    logoImg: "",
                    matchs: '',
                    message: "",
                    name: "",
                    phone: "",
                    publicImg: "",
                    publicName: '',
                    reason: '',
                    teams: '',
                    trainingFacilities: '',
                    trainingVideo: "",
                },
                banner: ''
            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ])
        },

        methods: {
            ...mapActions('organ', [
                'wodejianjieEdit',
                'wodejianjie',
            ]),
            //训练设施图片上传
            uptrainingFacilitiesImgsList(Response, file, fileList) {
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.trainingFacilities = imgs;

            },
            //删除训练设施图片
            RemovetrainingFacilitiesImgsList(file, fileList) {
                // this.dataForm.banner = "";
                // this.bannerList = [];
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.trainingFacilities = imgs;
            },
            //课程图片上传
            upcourses(Response, file, fileList) {
                // this.dataForm.courses.push(file.response.data.path);
                // console.log(this.dataForm.courses);

                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.courses = imgs;
            },
            //课程图片
            Removecourses(file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.courses = imgs;
            },
            //团队上传
            upteams(Response, file, fileList) {
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.teams = imgs;

            },
            //团队图片
            Removeteams(file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.teams = imgs;
            },
            //荣誉上传
            upmatchs(Response, file, fileList) {
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.matchs = imgs;

            },
            //荣誉图片
            Removematchs(file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.dataForm.matchs = imgs;
            },
            //logo图片上传
            uplogoImg(Response, file, fileList) {
                this.dataForm.logoImg = file.response.data.path;
                console.log(fileList);
            },
            //删除logo图片
            RemovelogoImg(file, fileList) {
                this.dataForm.logoImg = "";
                this.logoList = [];
            },
            //二维码图片上传
            uppublicImg(Response, file, fileList) {
                this.dataForm.publicImg = file.response.data.path;
                console.log(fileList);
            },
            //删除二维码图片
            RemovepublicImg(file, fileList) {
                this.dataForm.publicImg = "";
                this.publicImg = [];
            },
            //训练视频上传
            uptrainingVideoList(Response, file, fileList) {
                this.dataForm.trainingVideo = file.response.data.path;
                console.log(fileList);
            },
            //删除训练视频
            RemovetrainingVideoList(file, fileList) {
                this.dataForm.trainingVideo = "";
                this.trainingVideo = [];
            },
            //机构图片上传
            uphomeImgs(Response, file, fileList) {
                this.dataForm.homeImgs = file.response.data.path;
                console.log(fileList);
            },
            //删除机构图片
            RemovehomeImgs(file, fileList) {
                this.dataForm.homeImgs = "";
                this.homeImgsList = [];
            },
            onSave() {
                this.dataForm.id = Number(this.userStatus.statusId)
                this.dataForm.message = this.wang2.txt.html()
                console.log(this.dataForm.banner);
                this.dataForm.info = this.wang1.txt.html()
                this.wodejianjieEdit(this.dataForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功'
                        })
                        setTimeout(_ => {
                            this.$router.push('/organ/myIntrodu');
                        }, 800)
                    }
                })
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
        mounted() {
            var that = this;
            that.wang1 = new Wang('#wang1')
            that.wang1.create()
            that.wang2 = new Wang('#wang2')
            that.wang2.create()
            that.wodejianjie({id: that.id}).then(res => {
                const {code} = res
                if (code === 200) {
                    that.dataForm.address = res.data.address
                    that.dataForm.banner = res.data.banner
                    that.dataForm.homeImgs = res.data.homeImgs
                    that.dataForm.courses = res.data.courses
                    that.dataForm.id = res.data.id
                    that.dataForm.info = res.data.info
                    that.dataForm.infoAddress = res.data.infoAddress
                    that.dataForm.infoMail = res.data.infoMail
                    that.dataForm.infoPhone = res.data.infoPhone
                    that.dataForm.leaderName = res.data.leaderName
                    that.dataForm.leaderNo = res.data.leaderNo
                    that.dataForm.leaderPhone = res.data.leaderPhone
                    that.dataForm.logoImg = res.data.logoImg
                    that.dataForm.matchs = res.data.matchs
                    that.dataForm.message = res.data.message
                    that.dataForm.name = res.data.name
                    that.dataForm.phone = res.data.phone
                    that.dataForm.publicImg = res.data.publicImg
                    that.dataForm.teams = res.data.teams
                    that.dataForm.trainingFacilities = res.data.trainingFacilities
                    that.dataForm.trainingVideo = res.data.trainingVideo
                    that.dataForm.weChatNo = res.data.weChatNo
                    that.wang1.txt.html(that.dataForm.info)
                    that.wang2.txt.html(that.dataForm.message)
                }
            })
        }
    }
</script>


<style scoped>
    @import url("porgan.css");

    .border {
        border-left: 3px solid #c60818;
        padding-left: 10px;
        font-size: 16px;
    }

    .logoImg {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .logoImg img {
        margin-right: 20px;
        width: 150px;
        height: 150px;
    }
</style>

